<template>
	<view class="nav-bar" :style="{ paddingTop: safeAreaTop + 'px'}">
		<view class="nav-bar-content">
			<!-- 左侧区域 -->
			<view class="nav-bar-left" @click="handleLeftClick">
				<slot name="left">
					<view v-if="showBack" class="back-button">
						<text class="back-icon">{{ backIcon }}返回</text>
					</view>
				</slot>
			</view>

			<!-- 中间标题区域 -->
			<view class="nav-bar-center">
				<slot name="center">
					<text class="nav-bar-title">{{ title }}</text>
				</slot>
			</view>

			<!-- 右侧区域 -->
			<view class="nav-bar-right" @click="handleRightClick">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
	import { getThemeStyles } from '@/stores/theme';

	// ==================== Props 定义 ====================
	interface NavBarProps {
		/** 标题文本 */
		title ?: string;
		/** 是否显示返回按钮 */
		showBack ?: boolean;
		/** 返回按钮图标 */
		backIcon ?: string;
		/** 背景颜色 */
		backgroundColor ?: string;
		/** 标题颜色 */
		titleColor ?: string;
		/** 是否固定在顶部 */
		fixed ?: boolean;
		/** 是否显示底部阴影 */
		shadow ?: boolean;
		/** 是否使用主题颜色 */
		useTheme ?: boolean;
	}

	const props = withDefaults(defineProps<NavBarProps>(), {
		title: '',
		showBack: true,
		backIcon: '←',
		backgroundColor: 'rgba(255, 255, 255, 0.95)',
		titleColor: '#1e293b',
		fixed: false,
		shadow: true,
		useTheme: true
	});

	// ==================== Emits 定义 ====================
	const emit = defineEmits<{
		leftClick : []
		rightClick : []
	}>();

	// ==================== 响应式数据 ====================
	/** 状态栏高度 */
	const safeAreaTop = ref<number>(0);
	/** 导航栏总高度 */
	const navBarHeight = ref<number>(88);
	
	/** 主题样式 */
	const themeStyles = computed(() => props.useTheme ? getThemeStyles() : null);
	
	/** 计算后的背景颜色 */
	const computedBackgroundColor = computed(() => {
		return props.useTheme ? themeStyles.value?.primaryGradient : props.backgroundColor;
	});
	
	/** 计算后的标题颜色 */
	const computedTitleColor = computed(() => {
		return props.useTheme ? '#ffffff' : props.titleColor;
	});
	
	/** 计算后的返回按钮颜色 */
	const computedBackIconColor = computed(() => {
		return props.useTheme ? '#ffffff' : '#667eea';
	});

	// ==================== 生命周期 ====================
	onMounted(() => {
		// 获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		// 状态栏高度
		safeAreaTop.value = systemInfo.statusBarHeight || 0;
		// 导航栏总高度 = 状态栏高度 + 导航栏内容高度(88rpx转px)
		navBarHeight.value = safeAreaTop.value + uni.upx2px(88);
		
		// 监听主题变化
		if (props.useTheme) {
			uni.$on('themeChange', () => {
				// 主题切换时，computed 会自动更新
			});
		}
	});
	
	onBeforeUnmount(() => {
		if (props.useTheme) {
			uni.$off('themeChange');
		}
	});

	// ==================== 方法 ====================
	/** 处理左侧点击 */
	const handleLeftClick = () => {
		if (props.showBack) {
			// 默认行为：返回上一页
			uni.navigateBack();
		}
		emit('leftClick');
	};

	/** 处理右侧点击 */
	const handleRightClick = () => {
		emit('rightClick');
	};
</script>

<style scoped>
	.nav-bar {
		width: 100%;
		background: v-bind(computedBackgroundColor);
		backdrop-filter: blur(20rpx);
		box-shadow: v-bind('shadow ? "0 2rpx 16rpx rgba(0, 0, 0, 0.08)" : "none"');
		position: v-bind('fixed ? "fixed" : "relative"');
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.nav-bar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 32rpx;
	}

	/* 左侧区域 */
	.nav-bar-left {
		min-width: 80rpx;
		display: flex;
		align-items: center;
	}

	.back-button {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 48rpx;
		color: v-bind(computedBackIconColor);
		font-weight: bold;
		line-height: 1;
	}

	/* 中间标题区域 */
	.nav-bar-center {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
	}

	.nav-bar-title {
		font-size: 36rpx;
		font-weight: 600;
		color: v-bind(computedTitleColor);
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 右侧区域 */
	.nav-bar-right {
		min-width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>